<template>
  <div class="nav-out" :style="{ boxShadow: noShadow ? '' : '0 0 10px rgba(0,0,0,.3)' }">
    <div class="nav wrapper">
      <div class="nav-left">
        <router-link class="psq" to="/"
          ><img class="logo" src="../assets/logo.png" />
          腾讯问卷
        </router-link>
        <div class="links">
          <router-link class="AppBar" to="/guide">创建问卷</router-link>
          <router-link class="AppBar" to="/mine">我的问卷</router-link>
          <a class="AppBar" href="">回答小组</a>
          <a class="AppBar" href="">调查资讯</a>
          <a class="AppBar" href="">帮助中心</a>
        </div>
      </div>
      <!-- <div>
      <a class="login" href="">登录</a>
    </div> -->
      <div class="account">
        <div class="bell-container"><img class="bell" src="../assets/5.png" /></div>
        <div class="picname">
          <img class="headpic" src="../assets/6.jpg" />
          <span class="username">z</span>
        </div>
        <span class="splitor">|</span>
        <a class="logout" href="">退出</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    noShadow: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-out {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
}

.logo {
  padding-right: 5px;
  width: 32px;
}

.psq {
  text-decoration: none;
  color: black;
  font-size: 21px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  margin-right: 34px;
  font-family: tencentFont, sans-serif;
}

.psq:hover {
  color: #5ea9e8;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  box-sizing: border-box;
}

.nav-left {
  display: flex;
  align-items: center;
}

.links {
  display: flex;
  align-items: center;
}

.AppBar {
  display: block;
  text-decoration: none;
  color: black;
  margin: 0 25px;
  font-size: 17px;
  height: 60px;
  line-height: 60px;
  position: relative;
}

.AppBar.router-link-active,
.AppBar:hover {
  color: #2f8cdb;
}

.login {
  background-color: #80c200;
  color: #fff;
  border: 1px solid #80c200;
  padding: 0 20px;
  font-size: 14px;
  height: 34px;
  line-height: 34px;
  text-decoration: none;
  cursor: pointer;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 5px;
}

.AppBar.router-link-active::after,
.AppBar:hover::after {
  display: inline-block;
  width: 68px;
  height: 3px;
  border-bottom-color: #2f8cdb;
  content: "";
  position: absolute;
  bottom: 0px;
  background: #2f8cdb;
  left: 50%;
  transform: translate(-50%, 50%);
  display: block;
}

@font-face {
  font-family: "tencentFont";
  src: url("../assets/fontmin.ttf");
}

.account {
  display: flex;
  align-items: center;
}

.bell-container {
  display: flex;
  align-items: center;
}

.picname {
  display: flex;
  align-items: center;
  position: relative;
}

.bell {
  width: 20px;
  height: 20px;
  // vertical-align:middle;
}

.headpic {
  height: 25px;
  width: 25px;
  border-radius: 50%;
  margin-left: 24px;
  position: relative;
  top: -1px;
  // vertical-align:middle;
}

.username {
  font-size: 14px;
  margin-left: 5px;
  position: relative;
  top: -1px;
  color: black;
}

.splitor {
  font-size: 14px;
  margin-left: 7px;
  color: #acacac;
  position: relative;
  top: -0.5px;
}

.logout {
  font-size: 14px;
  text-decoration: none;
  color: black;
  margin-left: 6px;
}

.logout:hover {
  color: #58a6e7;
}
</style>
